import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

interface TabBarProps {
  tabs: string[];
  activeTab: string;
  onTabPress: (tab: string) => void;
  focusedTabIndex?: number | null;
}

const { width } = Dimensions.get('window');

export const TabBar: React.FC<TabBarProps> = ({
  tabs,
  activeTab,
  onTabPress,
  focusedTabIndex,
}) => {
  const getTabStyle = (index: number) => {
    const isActive = tabs[index] === activeTab;
    const isFocused = focusedTabIndex === index;
    
    return [
      styles.tab,
      // 如果是活跃的 Tab，使用活跃样式
      isActive && styles.activeTab,
      // 如果是聚焦的 Tab，使用聚焦样式
      isFocused && styles.focusedTab,
    ];
  };

  const getTabTextStyle = (index: number) => {
    const isActive = tabs[index] === activeTab;
    const isFocused = focusedTabIndex === index;
    
    return [
      styles.tabText,
      // 如果是活跃的 Tab，使用活跃文字样式
      isActive && styles.activeTabText,
      // 如果是聚焦的 Tab，使用聚焦文字样式
      isFocused && styles.focusedTabText,
    ];
  };

  return (
    <View style={styles.container}>
      {tabs.map((tab, index) => (
        <TouchableOpacity
          key={tab}
          style={getTabStyle(index)}
          onPress={() => onTabPress(tab)}
          tvParallaxProperties={{
            enabled: true,
            shiftDistanceX: 2.0,
            shiftDistanceY: 2.0,
            tiltAngle: 0.05,
            magnification: 1.1,
          }}
        >
          <Text style={getTabTextStyle(index)}>
            {tab === 'local' ? '本机' : tab === 'devices' ? '设备' : tab}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  tab: {
    paddingVertical: 15,
    paddingHorizontal: 20,
    marginHorizontal: 5,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
    backgroundColor: '#3a3a3a',
  },
  activeTab: {
    backgroundColor: '#4a90e2',
    borderColor: '#4a90e2',
  },
  focusedTab: {
    borderColor: '#ffffff',
    borderWidth: 2,
    shadowColor: '#ffffff',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 6,
  },
  tabText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#cccccc',
  },
  activeTabText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
  focusedTabText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
}); 